<template>
  <a-tooltip title="添加联系人">
    <a-button @click="open  = true">
      <template #icon>
        <plus-outlined/>
      </template>
    </a-button>
  </a-tooltip>
  <a-modal title="新建联系人" v-model:open="open" :width="450">
    <a-form name="add-contact"
            ref="formRef"
            :model="form"
            :rules="rules"
            class="padding-top"
            :label-col="{span:4}"
            :wrapper-col="{span:18}">
      <a-form-item label="姓名" name="full_name">
        <a-input v-model:value="form.full_name"/>
      </a-form-item>
      <a-form-item label="手机号" name="mobile">
        <a-input v-model:value="form.mobile"/>
      </a-form-item>
      <a-form-item label="职位" name="position">
        <a-select v-model:value="form.position" :options="positionList"/>
      </a-form-item>
      <a-form-item label="备注" name="remark">
        <a-textarea v-model:value="form.remark"/>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import {PlusOutlined} from '@ant-design/icons-vue';
import {positionList} from '@/config'
import {reactive, ref} from 'vue';
import {FormInstance, Rule} from 'ant-design-vue/es/form';

let open = ref<boolean>(false), formRef = ref<FormInstance>()
const form = reactive({full_name: <string>'', mobile: <string>'', position: <string>'', remark: <string>''})
const rules: Record<string, Rule[]> = {
  full_name: [
    {required: true, message: '姓名不能为空'},
    {min: 1, max: 6, message: '姓名请大于1个字少于6个字'}
  ],
  mobile: [{required: true, message: '请填写手机号码'}],
}
</script>

<style scoped>

</style>